<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>

<body>
  <div class="breadcrumb-nav">
    <span class="layui-breadcrumb">
      <a href="/dashBoard">首页</a>
      <a><cite>商品列表</cite></a>
    </span>
  </div>
  <a style="margin-top: 20px;" href="/itemAdd" class="layui-btn layui-btn-warm">增加商品</a>
  <table class="layui-table">
    <thead>
      <tr>
        <th>商品名字</th>
        <th>商品价格</th>
        <th>商品描述</th>
        <th>库存</th>
        <th>销量</th>
        <th>上架时间</th>
        <th>封面</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <% for(var i=0; i<items.length; i++) { %>
        <tr>
          <td>
            <%= items[i].itemName %>
          </td>
          <td>
            <%= items[i].itemPrice %>
          </td>
          <td title="<%= items[i].desc %>">
            <%= items[i].desc? (items[i].desc.length>10? items[i].desc.substr(0, 10) + '...' :items[i].desc) :'暂无描述' %>
          </td>
          <td>
            <%= items[i].store %>
          </td>
          <td>
            <%= items[i].sales %>
          </td>
          <td>
            <%= items[i].createAt %>
          </td>
          <td>
            <img
              src="<%= items[i].thumb || 'https://img0.baidu.com/it/u=1654078919,3119962037&fm=253&fmt=auto&app=138&f=JPEG?w=696&h=500' %>"
              width="100" alt="">
          </td>
          <td>
            <button data-id="<%= items[i]._id %>" class="layui-btn del layui-btn-danger layui-btn-xs">删除</button>
            <a href="/itemUpdate?id=<%=items[i]._id%>" class="layui-btn layui-btn-xs">编辑</a>
          </td>
        </tr>
        <% } %>
    </tbody>
  </table>
  <div id="page"></div>
  <script src="/static/layui/layui.js"></script>
  <script>
    layui.use(['laypage', 'jquery', 'layer'], function () {
      var laypage = layui.laypage;
      var $ = layui.jquery;
      var layer = layui.layer;
      // 删除商品
      $('.del').click(function () {
        // 弹出询问框
        var _this = this;
        layer.confirm('此操作会彻底删除商品，确认继续吗?', 
          { icon: 3, title: '提示' }, 
          function (index) {
            $.ajax({
              url: '/deleteItem',
              data: {
                id: _this.dataset.id
              },
              success: function(res){
                if (res.code ===0) {
                  layer.msg(res.msg, {icon:1,time: 1000}, function(){
                    history.go(0)
                  })
                }else{
                  layer.msg(res.msg, {icon:2,time: 1000})
                }
              }
            })
            layer.close(index);
          }
        );
      })

      laypage.render({
        elem: 'page',
        limit: 2,
        curr: <%= page %>, // 当前页
        layout: ['prev', 'page', 'next', 'limit', 'refresh', 'skip'],
        count: <%= total %>, //数据总数，从服务端得到
        jump: function (obj, first) {
          //首次不执行
          if (!first) {
            // do something
            location.href = "/itemLists?page=" + obj.curr + "&pageSize=" + obj.limit;
          }

        }
      });
    })
  </script>
</body>

</html>